<template>
  <layout-body height="100%" v-loading="initLoading">
    <div class="addon-main">
      <template v-for="(item, index) in addonData" :key="index">
        <div class="addon-item" @click="goAddon(item.addon_name)">
          <div class="icon" :class="item.icon"></div>
          <div>
            <div class="title">{{ item.title }}</div>
            <div class="desc mt5 text-grey">{{ item.desc }}</div>
          </div>
        </div>
      </template>
    </div>
  </layout-body>
</template>


<script lang="ts" setup>
import { ref, getCurrentInstance, onMounted } from "vue";
import { getAddon } from "@/api/system/addon";
import { Result, ResultError } from "@/types";
import router from "@/router";
import { useMenus } from "@/store";
const MenusStore = useMenus();
const {
  proxy,
  proxy: { $utils },
} = getCurrentInstance() as any;

const initLoading = ref<boolean>(true);

const addonData = ref<
  Array<{
    addon_name: string;
    icon: string;
    title: string;
    desc: string;
  }>
>([]);

const toInit = () => {
  getAddon()
    .then((res: Result) => {
      addonData.value = res.data;
      initLoading.value = false;
    })
    .catch((err: ResultError) => {
      $utils.errorMsg(err);
    });
};

const goAddon = (addon_name: string) => {
  var menus: any = MenusStore.getAddonMenus;
  console.log(menus);
  let itemMenu = $utils.getItemPath(menus[addon_name]);
  router.push({
    path: itemMenu.menu_path,
    query: itemMenu.url_params || {},
  });
};

onMounted(() => {
  toInit();
});
</script>

<style scoped>
.addon-main {
  display: flex;
  flex-wrap: wrap;
}
.addon-item {
  height: 60px;
  padding: 20px;
  width: 280px;
  background: #f7f8fa;
  border-radius: var(--base-radius);
  display: flex;
  justify-content: flex-start;
  cursor: pointer;
  position: relative;
  margin-right: 20px;
  margin-bottom: 20px;
}
.addon-item:hover {
  background: var(--el-color-primary-light-9);
  border-right-color: transparent;
  border-left-color: transparent;
  border-bottom-color: transparent;
  box-shadow: 0 1px 4px rgb(0 0 0 / 10%);
}
.addon-item .icon {
  width: 60px;
  background: var(--base-default);
  border-radius: var(--base-radius);
  text-align: center;
  line-height: 60px;
  color: #fff;
  font-size: 32px;
  margin-right: 20px;
}
.addon-item .title {
  font-size: 16px;
  font-weight: bold;
}
</style>